<template>
  <div class="middle">
    <div class="top" @click="navito">
      <div class="">
        <img class="side" src="../../../assets/side.png" alt="" />
      </div>
      <div class="mid">
        <div class="box" :style="style" v-for="(i, index) in data" :key="index">
          <div style="color: white; font-size: 18px; margin-top: 15px">
            {{ i.value }}
          </div>
          <div
            style="
              color: white;
              position: absolute;
              bottom: -2px;
              color: #5df8f7;
              font-size: 10px;
            "
          >
            {{ i.label }}
          </div>
        </div>
      </div>
      <div><img class="side" src="../../../assets/side.png" alt="" /></div>
    </div>

    <div class="mid-o" :style="style2">
      <div style="color: #5df8f7">试验室概况(一周)</div>
    </div>
    <div class="mid-t">
      <div class="item" :style="style3">
        <div
          style="
            text-align: center;
            color: white;
            font-size: 10px;
            -webkit-font-smoothing: antialiased;
          "
        >
          样 品 数 量
        </div>
        <div id="box1" class="item-one"></div>
      </div>
      <div class="item2" :style="style3">
        <div style="text-align: center; color: white; font-size: 10px">
          检 测 数 量
        </div>
        <div id="box2" class="item-one"></div>
      </div>
      <div class="item3" :style="style3">
        <div style="text-align: center; color: white; font-size: 10px">
          类 型 分 布
        </div>
        <div id="box3" class="item-one"></div>
      </div>
      <div class="item4" :style="style3">
        <div style="text-align: center; color: white; font-size: 10px">
          检 测 合 格 率
        </div>
        <div id="box4" class="item-one"></div>
      </div>
    </div>

    <!-- <div class="mid-b"> -->
    <MidBottom></MidBottom>
    <!-- </div> -->
  </div>
</template>


<script>
import * as echarts from "echarts";
import MidBottom from "./midBottom.vue";
import {
  getCountStatus,
  getSampleNumWeekly,
  getWdata,
  getSampleNumRoom,
} from "@/common/api";
export default {
  name: "Middle",
  props: {},
  components: {
    MidBottom,
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        // backgroundSize: "cover", // 背景图片大小自适应
        // backgroundPosition: "center", // 背景图片居中显示
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
    style2() {
      return {
        backgroundImage: `url(${this.bgStyle2})`,
        // backgroundSize: "cover", // 背景图片大小自适应
        // backgroundPosition: "center", // 背景图片居中显示
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
    style3() {
      return {
        backgroundImage: `url(${this.bgStyle3})`,
        // backgroundSize: "cover", // 背景图片大小自适应
        // backgroundPosition: "center", // 背景图片居中显示
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
  },
  data() {
    return {
      bgStyle: require("@/assets/zero.png"),
      bgStyle2: require("@/assets/midBg.png"),
      bgStyle3: require("@/assets/two.png"),
      data: [], //各类样品数量
      chartInstance: null,
      chartInstance2: null,
      chartInstance3: null,
      chartInstance4: null,
    };
  },
  methods: {
    getCharts1(data, data2) {
      let option = {
        backgroundColor: "#000549",
        tooltip: {},
        grid: {
          top: "4%",
          bottom: "2%", // 给 x 轴留出更多底部空间
          left: "2%", // 给 y 轴留出更多左侧空间
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#6a9cd5",
                margin: 6,
                fontSize: 6,
              },
            },
            axisTick: { show: false },
            // data: ["6.1", "6.2", "6.3", "6.4", "6.5", "6.6", "6.7"],
            data: data,
          },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 15,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLine: { show: false },
            axisLabel: {
              margin: 6,
              textStyle: {
                color: "#6a9cd5",
                fontSize: 6,
              },
            },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "异常流量",
            type: "line",
            smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            symbolSize: 0,

            lineStyle: {
              normal: {
                color: "#3deaff", // 线条颜色
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(61,234,255, 0.9)" },
                    { offset: 0.7, color: "rgba(61,234,255, 0)" },
                  ],
                  false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            // data: [1, 3, 9, 7, 12, 6, 8],
            data: data2,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getCharts2(data1, data2) {
      let option2 = {
        backgroundColor: "#000549",
        grid: {
          left: "46%", // 增加左侧边距以适应较长的y轴标签
          right: "2%",
          bottom: "2%", // 增加底部边距，给x轴留出空间（即使x轴不显示）
          top: "2%", // 增加上部边距，为y轴标签留出足够空间
          containLabel: false, // 不自动包含label，手动控制间距
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          // data: [
          //   "支柱绝缘子试验室",
          //   "线路绝缘子试验室",
          //   "金具试验室",
          //   "导地线试验室",
          //   "铁塔(管塔)试验室",
          //   "架空绝缘线试验室",
          //   "电缆保护管试验室",
          //   "电力电缆试验室",
          // ],
          data: data1,
          axisTick: { show: false }, // 不显示刻度线
          axisLine: { show: false }, // 不显示轴线
          axisLabel: {
            show: true,
            color: "#D0DEEE", // 文本颜色
            fontSize: 8, // 使用稍大的字号提高可读性
            margin: 4, // 增加此值可以加大标签与轴线的距离，间接增加项目间的间距
          },
        },
        series: [
          {
            name: "value",
            type: "bar",
            zlevel: 1,
            barCategoryGap: "50%",
            showBackground: true,
            backgroundStyle: {
              opacity: 0.098,
              color: "#FFFFFF",
              borderRadius: 20,
            },
            itemStyle: {
              // 默认颜色（如果某个数据项未定义颜色）
              color: "#36A5FF",
              borderRadius: 20,
              // opacity: function (params) {
              //   // 如果是隐藏项，设置透明度为0
              //   return params.data.hide ? 0 : 1;
              // },
            },
            barWidth: "50%",
            // data: [
            //   { value: 10, itemStyle: { color: "#FF6B6B" } }, // 红色
            //   { value: 20, itemStyle: { color: "#FFD93D" } }, // 黄色
            //   { value: 42, itemStyle: { color: "#6BCB77" } }, // 绿色
            //   { value: 50, itemStyle: { color: "#4F9CE8" } }, // 蓝色
            //   { value: 60, itemStyle: { color: "#A77AF9" } }, // 紫色
            //   { value: 40, itemStyle: { color: "#26C9FC" } }, // 浅蓝
            //   { value: 30, itemStyle: { color: "#F66B97" } }, // 粉红
            //   { value: 20, itemStyle: { color: "#FFB244" } }, // 橙色
            // ],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              color: "#ffffff",
              fontSize: 6,
              formatter: "{c}", // 显示数值
              // formatter: function (params) {
              //   // 如果是隐藏项，不显示标签
              //   return params.data.hide ? "" : `${params.value}%`;
              // },
            },
            data: data2,
          },
        ],
      };

      this.chartInstance2.setOption(option2);
    },
    getCharts3(data1, data2) {
      let option3 = {
        color: [
          "#64E3D5",
          "#2F8DF4",
          "#C25EC4",
          "blue",
          "orange",
          "green",
          "#F5D179",
          "#FC4567",
        ],
        backgroundColor: "#000549",
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "1%", // 留出少许左边距
          right: "30%", // 给图例留出右侧空间
          top: "6%",
          bottom: "6%",
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 2, // 减小图例项间距
          right: "0%", // 图例靠右对齐
          top: "center", // 垂直居中
          textStyle: {
            fontSize: 8,
            color: "white",
          },
          // data: [
          //   "电力电缆-低压",
          //   "架空绝缘电缆-1kV",
          //   "导地线",
          //   "电缆保护管",
          //   "线路绝缘子",
          //   "变电站支柱绝缘子",
          //   "电力金具",
          //   "角钢塔、钢管塔",
          // ],
          data: data1,
        },
        series: [
          {
            type: "pie",
            roseType: "radius",
            center: ["30%", "50%"], // 饼图中心靠左
            radius: ["50%", "70%"], // 半径保持不变
            // data: [
            //   { value: 220, name: "电力电缆-低压" },
            //   // { value: 120, name: "架空绝缘电缆-1kV" },
            //   // { value: 89, name: "导地线" },
            //   // { value: 169, name: "电缆保护管" },
            //   // { value: 159, name: "线路绝缘子" },
            //   // { value: 159, name: "变电站支柱绝缘子" },
            //   // { value: 159, name: "电力金具" },
            //   // { value: 159, name: "角钢塔、钢管塔" },
            // ],
            data: data2,
            label: {
              show: false, // 隐藏标签文字
            },
            labelLine: {
              show: false, // 去掉引导线
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
          },
        ],
      };
      this.chartInstance3.setOption(option3);
    },
    getCharts4(data1, data2) {
      let barWidth;
      if (data1.length <= 2) {
        barWidth = "10%"; // 当只有一条数据时，使用较小的宽度
      } else {
        barWidth = "50%"; // 多条数据时，使用默认或较大的宽度
      }
      let option4 = {
        backgroundColor: "#000549",
        grid: {
          left: "30%", // 增加左侧边距以适应较长的y轴标签
          right: "10%",
          bottom: "2%", // 增加底部边距，给x轴留出空间（即使x轴不显示）
          top: "2%", // 增加上部边距，为y轴标签留出足够空间
          containLabel: false, // 不自动包含label，手动控制间距
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          // data: [
          //   "支柱绝缘子",
          //   "线路绝缘子",
          //   "金具",
          //   "导地线",
          //   "铁塔(管塔)",
          //   "架空绝缘线",
          //   "电缆保护管",
          //   "电力电缆",
          // ],
          data: data1,
          axisTick: { show: false }, // 不显示刻度线
          axisLine: { show: false }, // 不显示轴线
          axisLabel: {
            show: true,
            color: "#D0DEEE", // 文本颜色
            fontSize: 8, // 使用稍大的字号提高可读性
            margin: 4, // 增加此值可以加大标签与轴线的距离，间接增加项目间的间距
          },
        },
        series: [
          {
            name: "value",
            type: "bar",
            zlevel: 1,
            barCategoryGap: "50%",
            showBackground: true,
            backgroundStyle: {
              opacity: 0.098,
              color: "#FFFFFF",
              borderRadius: 20,
            },
            itemStyle: {
              // 默认颜色（如果某个数据项未定义颜色）
              color: "#36A5FF",
              borderRadius: 20,
            },
            barWidth: barWidth,
            // data: [
            //   { value: 10, itemStyle: { color: "#FF6B6B" } }, // 红色
            //   { value: 20, itemStyle: { color: "#FFD93D" } }, // 黄色
            //   { value: 42, itemStyle: { color: "#6BCB77" } }, // 绿色
            //   { value: 50, itemStyle: { color: "#4F9CE8" } }, // 蓝色
            //   { value: 60, itemStyle: { color: "#A77AF9" } }, // 紫色
            //   { value: 40, itemStyle: { color: "#26C9FC" } }, // 浅蓝
            //   { value: 30, itemStyle: { color: "#F66B97" } }, // 粉红
            //   { value: 20, itemStyle: { color: "#FFB244" } }, // 橙色
            // ],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              color: "#ffffff",
              fontSize: 6,
              formatter: "{c}%", // 显示数值
            },
            data: data2,
          },
        ],
      };
      this.chartInstance4.setOption(option4);
    },
    getCountStatus() {
      getCountStatus().then((res) => {
        if (res.success) {
          const arr = [
            { sign: "statusOne", label: "待制样" },
            { sign: "statusTwo", label: "静置中" },
            { sign: "statusThree", label: "待检测" },
            { sign: "statusFour", label: "检测中" },
            { sign: "statusFive", label: "已检测" },
            { sign: "statusSix", label: "待返样" },
          ];
          this.data = [];
          for (let i in res.data) {
            let single = arr.find((item) => item.sign == i);
            this.data.push({
              label: single.label,
              value: res.data[i],
            });
          }
        }
      });
    },
    getSampleNumWeekly() {
      getSampleNumWeekly().then((res) => {
        if (res.success) {
          let data = Object.keys(res.data);
          let data2 = Object.values(res.data);
          data = data.map((item) => {
            const date = new Date(item);
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            return `${month}-${day}`;
          });
          this.getCharts1(data, data2);
        }
      });
    },
    getWdata() {
      getWdata().then((res) => {
        if (res.code == 200) {
          let typeArr = res.data.SampleQuantityByTypeData; //类型分布
          let data = typeArr.map((i) => i.name);
          // let data = [
          //   "电力电缆-低压",
          //   "架空绝缘电缆-1kV",
          //   "导地线",
          //   "电缆保护管",
          //   "线路绝缘子",
          //   "变电站支柱绝缘子",
          //   "电力金具",
          //   "角钢塔、钢管塔",
          // ];
          // let typeArr = [
          //   { value: 220, name: "电力电缆-低压" },
          //   { value: 120, name: "架空绝缘电缆-1kV" },
          //   { value: 89, name: "导地线" },
          //   { value: 169, name: "电缆保护管" },
          //   { value: 159, name: "线路绝缘子" },
          //   { value: 159, name: "变电站支柱绝缘子" },
          //   { value: 159, name: "电力金具" },
          //   { value: 159, name: "角钢塔、钢管塔" },
          // ];
          if (data.length) {
            this.getCharts3(data, typeArr);
          }

          // res.data.QualificationRateByTypeData = [
          //   {
          //     value: "50%", //合格率 百分比
          //     key: "线路绝缘子", //类型（样品）
          //   },
          //   {
          //     value: "40%", //合格率 百分比
          //     key: "电力电缆-低压", //类型（样品）
          //   },
          //   {
          //     value: "30%", //合格率 百分比
          //     key: "电力金具", //类型（样品）
          //   },
          //   {
          //     value: "80%", //合格率 百分比
          //     key: "电缆保护管", //类型（样品）
          //   },
          //   {
          //     value: "15%", //合格率 百分比
          //     key: "角钢塔、钢管塔", //类型（样品）
          //   },
          //   {
          //     value: "67%", //合格率 百分比
          //     key: "架空绝缘电缆-1kV", //类型（样品）
          //   },
          //   {
          //     value: "55%", //合格率 百分比
          //     key: "变电站支柱绝缘子", //类型（样品）
          //   },
          //   {
          //     value: "36%", //合格率 百分比
          //     key: "导地线", //类型（样品）
          //   },
          // ];
          let percentArr = res.data.QualificationRateByTypeData; //合格率
          let data2 = percentArr.map((i) => i.key);
          let colors = [
            "#FFB244",
            "#FFD93D",
            "#6BCB77",
            "#4F9CE8",
            "#A77AF9",
            "#26C9FC",
            "#F66B97",
            "#FF6B6B",
          ];
          let data3 = percentArr.map((i, index) => {
            return {
              value: parseFloat(i.value.replace(/[^\d.]/g, "")),
              itemStyle: { color: colors[index] },
            };
          });
          data3.push({
            hide: true,
            value: 100,
            itemStyle: { color: "" },
          });
          if (data2.length) {
            this.getCharts4(data2, data3);
          }
        }
      });
    },
    getSampleNumRoom() {
      getSampleNumRoom().then((res) => {
        if (res.success) {
          let data1 = [];
          let data2 = [];
          for (let i in res.data) {
            data1.push(i);
            data2.push({ value: res.data[i], itemStyle: { color: "#08B6BE" } });
          }
          this.getCharts2(data1, data2);
        }
      });
    },
    navito() {
      window.location.href = "http://192.168.100.80";
    },
  },
  mounted() {
    // const screenWidth = screen.width;
    // const screenHeight = screen.height;
    // console.log(
    //   `屏幕分辨率宽度: ${screenWidth}, 屏幕分辨率高度: ${screenHeight}`
    // );
    this.chartInstance = echarts.init(document.getElementById("box1"));
    this.chartInstance2 = echarts.init(document.getElementById("box2"));
    this.chartInstance3 = echarts.init(document.getElementById("box3"));
    this.chartInstance4 = echarts.init(document.getElementById("box4"));
    this.getCountStatus();
    this.getSampleNumWeekly();
    this.getWdata();
    this.getSampleNumRoom();
    // this.getCharts1();
    // this.getCharts2();
    // this.getCharts3();
    // this.getCharts4();

    setInterval(() => {
      this.getCountStatus();
      this.getSampleNumWeekly();
      this.getWdata();
      this.getSampleNumRoom();
    }, 1000 * 60 * 3);

    window.onresize = () => {
      this.chartInstance.resize();
      this.chartInstance2.resize();
      this.chartInstance3.resize();
      this.chartInstance4.resize();
    };
  },
  created() {
    // this.getCountStatus();
  },
};
</script>


<style lang="scss" scoped>
.middle {
  width: calc(50vw - 30px);
  padding: 0px 20px 10px 10px;
  height: calc(50vh - 8vh - 10px);
  display: flex;
  flex-direction: column;

  // background-color: red;
  .top {
    width: 100%;
    height: 6vh;
    display: flex;
    justify-content: space-between;

    .side {
      width: 120%;
      height: 120%;
    }

    .mid {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      gap: 20px;

      .box {
        width: 12%;
        gap: 1%;
        height: 136%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
      }
    }
  }

  .mid-o {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mid-t {
    margin-top: 10px;
    width: 100%;
    height: 22vh;
    display: flex;
    align-items: center;
    gap: 10px;

    .item {
      width: 27%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // border: 1px solid #5df8f7;

      .item-one {
        flex: 1;
        width: calc(100% - 4px);
        margin-top: 5px;
        padding: 2px 2px;
      }
    }

    .item2 {
      width: 22%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // border: 1px solid #5df8f7;

      .item-one {
        flex: 1;
        width: calc(100% - 4px);
        margin-top: 5px;
        padding: 2px 2px;
      }
    }

    .item3 {
      width: 22%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // border: 1px solid #5df8f7;

      .item-one {
        flex: 1;
        width: calc(100% - 4px);
        margin-top: 5px;
        padding: 2px 2px;
      }
    }

    .item4 {
      width: 27%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // border: 1px solid #5df8f7;

      .item-one {
        flex: 1;
        width: calc(100% - 4px);
        margin-top: 5px;
        padding: 2px 2px;
      }
    }
  }
  .mid-b {
    margin-top: 10px;
    width: 100%;
    height: 20vh;
  }
}
</style>
